<template>
	<view class="vitae">
		<u-navbar bgColor="#fff">
			<view slot="left" class="align-center">
				<image @click="goBack" src="@/static/login/back3.png" style="width: 36rpx; height: 36rpx">
				</image>
			</view>
			<view slot="center">
				<view style="font-weight: 600; font-size: 36rpx; color: #333333">我的在线简历</view>
			</view>
		</u-navbar>
		<!--  -->
		<view class="align-center" style="padding: 40rpx 0; border-bottom: 1rpx solid #eeeeee">
			<view style="margin-right: 30rpx" @click="chooseFun">
				<image :src="userInfo.head" style="width: 124rpx; height: 124rpx; border-radius: 50%"></image>
			</view>
			<view>
				<view class="align-center">
					<input :focus="focus" type="text" v-model="userInfo.name" @confirm="
							confirm('name', userInfo.name);
							focus = false;
						" style="font-weight: 600; font-size: 40rpx; color: #333333; width: 200rpx" />
					<u-icon @click="focus = !focus" name="edit-pen" color="#999999" size="46"></u-icon>
				</view>
				<view style="font-weight: 400; font-size: 28rpx; color: #333333;margin: 10rpx 0;">
					{{ userInfo.sex == 1 ? '男' : '女' }} ·
					{{ userInfo.age }}岁 ·
				</view>
				<view class="align-center">
					<input :focus="phoneFocus" type="text" v-model="userInfo.phone" @confirm="
								confirm('phone', userInfo.phone);
								phoneFocus = false;
							" style=" font-size: 30rpx; color: #333333; width: 200rpx" />
					<u-icon @click="phoneFocus = !phoneFocus" name="edit-pen" color="#999999" size="46"></u-icon>
				</view>
			</view>

		</view>
		<!--  -->
		<view style="padding: 40rpx 0; border-bottom: 1rpx solid #eeeeee">
			<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 34rpx">工作照片</view>
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"
				width="200" height="200" uploadIcon="plus"></u-upload>
		</view>
		<view style="padding: 40rpx 0; border-bottom: 1rpx solid #eeeeee" @click="$tools.navigite('./plan', 1)">
			<view style="margin-bottom: 28rpx; font-weight: 600; font-size: 32rpx; color: #333333">工作规划，岗位更准</view>
			<view class="flex-between1" style="margin-bottom: 14rpx">
				<text>{{ userInfo.workIntention }} {{ userInfo.income }}</text>
				<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
			</view>
			<view style="font-weight: 300; font-size: 28rpx; color: #999999">{{ userInfo.workTime }}
				{{ userInfo.workAddress }}
			</view>
		</view>
		<view style="padding: 40rpx 0; border-bottom: 1rpx solid #eeeeee" @click="$tools.navigite('./plan', 2)">
			<view style="margin-bottom: 28rpx; font-weight: 600; font-size: 32rpx; color: #333333">经历技能，涨薪更多</view>
			<!-- <view class="flex-between1" style="margin-bottom: 14rpx">
				<text>华中科技大学</text>
				<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
			</view> -->
			<view class="flex-between1"
				style="margin-bottom: 30rpx; font-weight: 300; font-size: 28rpx; color: #999999">
				<text>{{ userInfo.graduationDate || '' }} {{ userInfo.culture }} {{ userInfo.majorStudied }}</text>
				<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
			</view>
			<u-upload :fileList="fileList2" name="2" multiple :maxCount="10" width="88" :deletable="false"
				:disabled="true" height="88" uploadIcon="plus"></u-upload>
		</view>

		<!--  -->
		<view style="padding: 40rpx 0; border-bottom: 1rpx solid #eeeeee">
			<view class="flex-between1" style="margin-bottom: 30rpx">
				<text style="font-weight: 600; font-size: 32rpx; color: #333333">工作经历</text>
				<u-icon @click="$tools.navigite('./plan', 3)" name="plus-circle" color="#999999" size="40"></u-icon>
			</view>
			<view v-for="(item, index) in workList" :key="index" style="margin-bottom: 40rpx">
				<view>
					<view class="flex-between1" style="margin-bottom: 14rpx">
						<text style="font-weight: 600; font-size: 28rpx; color: #333333">{{ item.companyName }}</text>
						<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image> -->
						<u-icon @click="deleteWorkExp(item.id)" name="trash" size="38"></u-icon>
					</view>
					<view style="margin-bottom: 26rpx">
						<text style="font-weight: 300; font-size: 28rpx; color: #999999">{{ item.postName }}</text>
						<text
							style="font-weight: 300; font-size: 28rpx; color: #999999; margin-left: 60rpx">{{ item.timeStart }}-{{ item.timeEnd }}</text>
					</view>
					<view v-html="item.content.replace(/\n/g, '<br>')"
						style="font-weight: 300; font-size: 28rpx; color: #999999"></view>
				</view>
			</view>
		</view>
		<view style="padding: 40rpx 0; border-bottom: 1rpx solid #eeeeee; margin-bottom: 50rpx">
			<view style="margin-bottom: 28rpx; font-weight: 600; font-size: 32rpx; color: #333333">补充更多，入职更快</view>
			<view class="flex-between1" style="margin-bottom: 40rpx">
				<text>民族</text>
				<view class="align-center">
					<input type="text" v-model="userInfo.nation" @confirm="confirm('nation', userInfo.nation)"
						placeholder="请输入"
						style="font-weight: 400; font-size: 28rpx; color: #999999; text-align: right" />
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx; margin-left: 20rpx"></image> -->
				</view>
			</view>
			<view class="flex-between1" style="margin-bottom: 40rpx">
				<text>婚姻状况</text>
				<view class="align-center">
					<input type="text" v-model="userInfo.marital" @confirm="confirm('marital', userInfo.marital)"
						placeholder="请输入"
						style="font-weight: 400; font-size: 28rpx; color: #999999; text-align: right" />
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx; margin-left: 20rpx"></image> -->
				</view>
			</view>
			<view class="flex-between1" style="margin-bottom: 40rpx">
				<text>现住址</text>
				<view class="align-center">
					<input type="text" v-model="userInfo.address" @confirm="confirm('address', userInfo.address)"
						placeholder="请输入"
						style="font-weight: 400; font-size: 28rpx; color: #999999; text-align: right" />
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx; margin-left: 20rpx"></image> -->
				</view>
			</view>
			<view class="flex-between1" style="margin-bottom: 40rpx">
				<text>身高</text>
				<view class="align-center">
					<input type="text" v-model="userInfo.height" @confirm="confirm('height', userInfo.height)"
						placeholder="请输入身高"
						style="font-weight: 400; font-size: 28rpx; color: #999999; text-align: right" />
					<text>cm</text>
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx; margin-left: 20rpx"></image> -->
				</view>
			</view>
			<view class="flex-between1" style="margin-bottom: 40rpx">
				<text>体重</text>
				<view class="align-center">
					<input type="text" v-model="userInfo.weight" @confirm="confirm('weight', userInfo.weight)"
						placeholder="请输入体重"
						style="font-weight: 400; font-size: 28rpx; color: #999999; text-align: right" />
					<text>kg</text>
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx; margin-left: 20rpx"></image> -->
				</view>
			</view>
			<view class="flex-between1" style="margin-bottom: 30rpx">
				<text>健康证</text>
				<view class="align-center">
					<text style="font-weight: 400; font-size: 28rpx; color: #999999; text-align: right">请上传健康证</text>
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx; margin-left: 20rpx"></image> -->
				</view>
			</view>
			<view style="margin-bottom: 30rpx">
				<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
					:maxCount="1" width="200" height="200" uploadIcon="plus"></u-upload>
			</view>
			<view @click="show1 = true" class="flex-between1" style="margin-bottom: 40rpx">
				<text>是否有明显纹身</text>
				<view class="align-center">
					<text
						style="font-weight: 400; font-size: 28rpx; color: #999999; text-align: right">{{ userInfo.tattoo == 1 ? '是' : '否' }}</text>
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx; margin-left: 20rpx">
					</image>
				</view>
			</view>
			<u-picker :show="show1" :columns="columns1" @confirm="confirm1" @cancel="show1 = false"></u-picker>
			<view class="flex-between1" style="margin-bottom: 40rpx">
				<text>身体状况</text>
				<view class="align-center">
					<input type="text" v-model="userInfo.body" @confirm="confirm('body', userInfo.body)"
						placeholder="请输入身体状况"
						style="font-weight: 400; font-size: 28rpx; color: #999999; text-align: right" />
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx; margin-left: 20rpx"></image> -->
				</view>
			</view>
			<view @click="show2 = true" class="flex-between1" style="margin-bottom: 40rpx">
				<text>是否上社保</text>
				<view class="align-center">
					<text
						style="font-weight: 400; font-size: 28rpx; color: #999999; text-align: right">{{ userInfo.social == 1 ? '是' : '否' }}</text>
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx; margin-left: 20rpx">
					</image>
				</view>
			</view>
			<u-picker :show="show2" :columns="columns1" @confirm="confirm2" @cancel="show2 = false"></u-picker>
			<view class="flex-between1" style="margin-bottom: 30rpx">
				<text>学历证书</text>
				<view class="align-center">
					<text style="font-weight: 400; font-size: 28rpx; color: #999999; text-align: right">请上传学位证书</text>
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx; margin-left: 20rpx"></image> -->
				</view>
			</view>
			<view style="margin-bottom: 30rpx">
				<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple
					:maxCount="10" width="200" height="200" uploadIcon="plus"></u-upload>
			</view>
			<view class="flex-between1" style="margin-bottom: 30rpx">
				<text>荣誉证书</text>
				<view class="align-center">
					<text style="font-weight: 400; font-size: 28rpx; color: #999999; text-align: right">请上传荣誉证书</text>
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx; margin-left: 20rpx"></image> -->
				</view>
			</view>
			<view style="margin-bottom: 30rpx">
				<u-upload :fileList="fileList5" @afterRead="afterRead" @delete="deletePic" name="5" multiple
					:maxCount="10" width="200" height="200" uploadIcon="plus"></u-upload>
			</view>
			<view class="flex-between1">
				<text>备注</text>
				<view class="align-center">
					<input type="text" v-model="userInfo.remark" @confirm="confirm('remark', userInfo.remark)"
						placeholder="请输入备注"
						style="font-weight: 400; font-size: 28rpx; color: #999999; text-align: right" />
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx; margin-left: 20rpx"></image> -->
				</view>
			</view>
		</view>
		<!--  -->
		<view class="flex-center1">
			<view @click="$tools.navigite('./vitaepreview')" class="flex-center1"
				style="font-weight: 600; font-size: 32rpx; color: #ffffff; width: 640rpx; height: 96rpx; background: #1365f9; border-radius: 16rpx">
				预览
			</view>
		</view>
	</view>
</template>

<script>
	import urls from '@/common/url.js';
	export default {
		data() {
			return {
				focus: false,
				phoneFocus: false,
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				fileList5: [],
				show: false,
				show1: false,
				columns1: [
					['是', '否']
				],
				show2: false,
				userInfo: {},
				workList: []
			};
		},
		onShow() {
			this.init();
		},
		methods: {
			goBack() {
				uni.navigateTo({
					url: './mine'
				})
			},
			init() {
				this.$request('front/user/userInfo').then((res) => {
					console.log(res, '个人信息');
					this.userInfo = res.obj.userInfo;
					if (this.userInfo.phone && this.userInfo.phone.length > 11) {
						this.userInfo.phone = '设置手机号'
					}
					if (this.userInfo.name && this.userInfo.name.length > 11) {
						this.userInfo.name = '设置姓名'
					}
					this.workList = res.obj.workList;
					if (this.userInfo.workImage) {
						const imglist = this.userInfo.workImage.split(',');
						imglist.map((item, index) => {
							this.$set(this.fileList1, index, {
								url: item
							});
						});
					}
					if (this.userInfo.skills) {
						const imglist1 = this.userInfo.skills.split(',');
						imglist1.map((item, index) => {
							this.$set(this.fileList2, index, {
								url: item
							});
						});
					}
					if (this.userInfo.health) {
						const imglist2 = this.userInfo.health.split(',');
						imglist2.map((item, index) => {
							this.$set(this.fileList3, index, {
								url: item
							});
						});
					}
					if (this.userInfo.education) {
						const imglist4 = this.userInfo.education.split(',');
						imglist4.map((item, index) => {
							this.$set(this.fileList4, index, {
								url: item
							});
						});
					}
					if (this.userInfo.honor) {
						const imglist5 = this.userInfo.honor.split(',');
						imglist5.map((item, index) => {
							this.$set(this.fileList5, index, {
								url: item
							});
						});
					}
				});
			},
			confirm(key, value) {
				const data = {
					id: this.userInfo.id,
					[key]: value,
					userId: this.userInfo.userId
				};
				this.updateXX(data);
			},
			confirm1(e, key) {
				console.log('confirm', e);
				this.show1 = false;
				const data = {
					id: this.userInfo.id,
					tattoo: e.value[0] == '是' ? 1 : 0,
					userId: this.userInfo.userId
				};
				this.updateXX(data);
			},
			confirm2(e, key) {
				console.log('confirm', e);
				this.show2 = false;
				const data = {
					id: this.userInfo.id,
					social: e.value[0] == '是' ? 1 : 0
				};
				this.updateXX(data);
			},
			deleteWorkExp(id) {
				this.$request('front/user/deleteWorkExp', {
					id
				}).then((res) => {
					console.log(res, 'sssss');
					if (res.code == 0) {
						this.$u.toast('操作成功');
						setTimeout(() => {
							this.init();
						}, 1000);
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			//修改头像
			chooseFun() {
				this.$utils.choose().then((res) => {
					console.log(res);
					let tempFilePaths = res.tempFilePaths[0];
					console.log(tempFilePaths, 'tempFilePaths');
					uni.showLoading();
					this.$utils.upload('front/search/uploadImage', tempFilePaths, {}).then((result) => {
						console.log(result, '头像');
						const data = {
							id: this.userInfo.id,
							head: JSON.parse(result.data).obj,
							userId: this.userInfo.userId
						};
						this.updateXX(data);
					});
				});
			},
			updateXX(data) {
				this.$request('front/user/setUserInfo', data).then((res) => {
					console.log(res, 'sssss');
					if (res.code == 0) {
						this.$u.toast('修改成功');
						setTimeout(() => {
							this.init();
						}, 1000);
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			setimg(event, key) {
				console.log();
				const list = [];
				this[`fileList${event.name}`].map((item, index) => {
					list.push(item.url);
				});
				const fileList1str = list.join(',');
				const data = {
					id: this.userInfo.id,
					[key]: fileList1str,
					userId: this.userInfo.userId
				};
				this.updateXX(data);
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				// this.setimg(event);
				switch (event.name) {
					case '1':
						this.setimg(event, 'workImage');
						break;
					case '3':
						this.setimg(event, 'health');
						break;
					case '4':
						this.setimg(event, 'education');
						break;
					case '5':
						this.setimg(event, 'honor');
						break;
				}
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					console.log(lists[i].url, 'lists[i].url');
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
				}
				switch (event.name) {
					case '1':
						this.setimg(event, 'workImage');
						break;
					case '3':
						this.setimg(event, 'health');
						break;
					case '4':
						this.setimg(event, 'education');
						break;
					case '5':
						this.setimg(event, 'honor');
						break;
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	::v-deep .uicon-close {
		font-size: 30rpx !important;
		font-weight: 600 !important;
		line-height: 30rpx !important;
	}

	::v-deep .u-upload__deletable {
		width: 40rpx !important;
		height: 40rpx !important;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.vitae {
		padding: 180rpx 32rpx;
	}
</style>